$(function(){
    $('.imgPopup img').click(function(){
        var url = $(this).attr('src');
        showBigImage(url,$(this));
    });
});
function showBigImage(url,obj){
    var maxWidth = 500;
    var offset = obj.offset();
    var start = {
        width:obj.attr('width')||parseInt(obj.css('width')),
        height:obj.attr('height')||parseInt(obj.css('height'))
    }
    $('<div></div>')
    .attr('id', 'div_img_cover')
    .css({ 'position': 'absolute', 'top': '0', 'left': '0', 'z-index': 9999, 
        'width': "100%", 
        'height': getWaitHeight(),
        'text-align': 'center',
        'font': 'bold 24px arial',
        'background-repeat': 'no-repeat',
        'background-position': 'center',
        'background-attachment': 'fixed',
        'opacity':0.8,
        'background':'#000'
        })
    .appendTo('body');
    
    var img = new Image();
    $(img).css(start);
    if(img.attachEvent){
        img.attachEvent('onload',imgLoaded)
    }else{
        img.addEventListener('load',imgLoaded,false);
    }
    img.src = url;
    function imgLoaded(){
        var imgWidth = img.width,imgHeight = img.height;
        var newWidth = imgWidth > maxWidth ? maxWidth : imgWidth;
        var newHeight = imgHeight/imgWidth*newWidth
        var end = {
            width:parseInt(newWidth),
            height:parseInt(newHeight)
        }
        var container = $('<div></div>').appendTo('body');
        container.css('position','absolute');
        container.css(offset);
        container.attr('id','container');
        container.append(img);
        var css = setElementCenter('#container',1,end);
        $(img).animate(end,200);
        container.animate(css,200);
        $('#div_img_cover').click(function(){
            var that = $(this);
            $(img).animate(start,200);
            container.animate(offset,200,function(){
                that.remove();
                $(this).remove();
            });
        });
    }
    
    function setElementCenter(selector,pos,finalSize){
        var position = $(selector).css('position')=='fixed';
        var winSize = myGetWinSize();
        var elementSize = finalSize || getElementSize(selector);
        var finalTop =(winSize.height-elementSize.height)/2 + parseInt((!position ? winSize.scrollTop : 0)),
            finalLeft=(winSize.width-elementSize.width)/2+winSize.scrollLeft;
        var finalCss = {
            left:finalLeft,
            top:position ? finalTop : (finalTop<winSize.scrollTop ? winSize.scrollTop : finalTop)
        }
        if(!pos){
            $(selector).css({'position':position ?'fixed' : 'absolute','z-index':10000});
            $(selector).css(finalCss);
        }
        $(selector).css({'z-index':10000});
        return finalCss;
    }
    function myGetWinSize(){
        var size = {
            width:document.documentElement.clientWidth || document.body.clientWidth,
            height:document.documentElement.clientHeight || document.body.clientHeight,
            scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
            scrollLeft:document.documentElement.scrollLeft || document.body.scrollLeft
        }
        return size;
    }
    function getElementSize(selector){
        return {
            width:$(selector).width(),
            height:$(selector).height()
        }
    }
    function getWaitHeight(){
        var scrollHeight,
            offsetHeight;
        // handle IE 6
        if (!$.support.style) {
            scrollHeight = Math.max(
                 document.documentElement.scrollHeight,
                 document.body.scrollHeight
            );
            offsetHeight = Math.max(
                     document.documentElement.offsetHeight,
                     document.body.offsetHeight
            );
        
            if (scrollHeight < offsetHeight) {
                     return $(window).height() + 'px';
            } else {
                     return scrollHeight + 'px';
            }
        // handle "good" browsers
        } else {
            return $(document).height() + 'px';
        }
    }
}